<template>
  <div class="table personInfo">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-friendadd"></i>个人类型——申请详情
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="title">
        <el-button type="primary" @click="ThroughAuditing=true">审核通过</el-button>
        <el-button type="danger" @click="editVisible = true">驳回</el-button>
      </div>
      <div class="content_diy">
        <ul>
          <li>
            <h2>账号信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>账号名称：</label>
                <p>{{Info.user_name}}</p>
              </dd>
              <dd>
                <label>账号头像：</label>
                <p>
                  <img :src="Info.user_header_img" preview="0" preview-text="账号头像">
                </p>
              </dd>
              <dd>
                <label>账号介绍：</label>
                <div class="js">{{Info.user_introduce}}</div>
              </dd>
            </dl>
          </li>
          <li>
            <h2>运营者信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>姓名：</label>
                <p>{{Info.operator_name}}</p>
              </dd>
              <dd>
                <label>手机号码：</label>
                <p>{{Info.operator_phone}}</p>
              </dd>
              <dd>
                <label>联系邮箱：</label>
                <p>{{Info.mailbox}}</p>
              </dd>
              <dd>
                <label>具体地址：</label>
                <p>{{Info.address}}</p>
              </dd>
              <dd>
                <label>负责人身份证号：</label>
                <p>{{Info.operator_id_num}}</p>
              </dd>
              <dd>
                <label>身份证正面照片：</label>
                <p>
                  <img :src="Info.operator_id_card_a" preview="1" preview-text="身份证正面照片">
                </p>
              </dd>
            </dl>
          </li>
          <li>
            <h2>补充信息:</h2>
            <dl class="dl_diy">
              <dd>
                <label>材料证明照片：</label>
                <p>
                  <img :src="Info.evidence" preview="2" preview-text="材料证明照片">
                </p>
              </dd>
            </dl>
          </li>
        </ul>
      </div>
    </div>
    <!-- 弹出审核通过 -->
    <el-dialog title="审核通过" :visible.sync="ThroughAuditing" width="40%">
      <el-form :model="TGruleForm" ref="TGruleForm" label-width="100px" class="demo-ruleForm">
        <p>该账号所发文章是否需要审核？</p>
        <el-form-item label="请选择是否">
          <el-radio v-model="TGruleForm.status" label="1">是</el-radio>
          <el-radio v-model="TGruleForm.status" label="0">否</el-radio>
        </el-form-item>
        <div class="center">
          <el-button type="primary" @click="TGsure('TGruleForm')">确定</el-button>
          <el-button @click="ThroughAuditing = false">取消</el-button>
        </div>
      </el-form>
    </el-dialog>

    <!-- 弹出的驳回框 -->
    <el-dialog title="驳回原因" :visible.sync="editVisible" width="40%">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="驳回原因" prop="desc">
          <el-input type="textarea" v-model.trim="ruleForm.desc"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="sure('ruleForm')">确 定 驳 回</el-button>
          <el-button @click="editVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as api from "../../../http/api.js";
export default {
  data() {
    return {
      id: this.$route.query.id, // 这个id 就是 列表通过路由的参数 传递过来的 媒体id
      ThroughAuditing: false, //默认审核通过的框 不显示
      TGruleForm: {
        //通过审核中 文章是否需要再次审核
        status: "1"
      },
      editVisible: false, //默认驳回弹出框不显示
      ruleForm: {
        //驳回里面的textarea
        desc: ""
      },
      rules: {
        //验证规则
        desc: [{ required: true, message: "请填写驳回原因", trigger: "blur" }]
      },
      Info: {}, //总数据
      Token: sessionStorage.getItem("Token") //每次登陆的token
    };
  },
  methods: {
    getData() {
      //获取列表信息
      this.$post(api.view_information, {
        token: this.Token,
        media_id: this.id
      }).then(res => {
        if (res.status == "0") {
          this.Info = res.data;
        }
      });
    },

    TGsure(formName) {
      //审核通过弹出框
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post(api.media_check, {
            token: this.Token,
            media_id: this.id, //媒体账号ID
            type: 1, //请求操作类型 1通过 2驳回 3禁用 4恢复禁用账号
            is_review: this.TGruleForm.status // 如果这个账号的文章需要审核 就是1 不需要就是0。接口是int类型 以后可能有bug!
          })
            .then(res => {
              if (res.status == 0) {
                this.$message({
                  type: "success",
                  message: "确认成功！"
                });
                //关闭弹框
                this.ThroughAuditing = false;
                // 如果确定通过审核跳转到列表页面 延迟一秒！因为setTimeout 里面不是箭头函数所以this的指向有问题！所以用that来操作！
                let that = this;
                setTimeout(function() {
                  that.$router.push({ path: "/accountAudit" });
                }, 2000);
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            })
            .catch(res => {
              console.log(res);
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    sure(formName) {
      //确认驳回后：
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.$post(api.media_check, {
            token: this.Token,
            media_id: this.id, //媒体账号ID
            type: 2, //请求操作类型 1通过 2驳回 3禁用 4恢复禁用账号
            turn_down: this.ruleForm.desc //驳回内容
          })
            .then(res => {
              if (res.status == 0) {
                this.$message({
                  type: "success",
                  message: "已驳回"
                });
                //关闭弹框
                this.editVisible = false;
                // 如果确定驳回跳转到列表页面
                let that = this;
                setTimeout(function() {
                  that.$router.push({ path: "/accountAudit" });
                }, 2000);
              } else {
                this.$message({
                  type: "error",
                  message: res.msg
                });
              }
            })
            .catch(res => {
              console.log(res);
            });
        } else {
          this.$message({
            type: "error",
            message: "请填写驳回原因"
          });
          return false;
        }
      });
    }
  },
  created() {
    this.getData();
  }
};
</script>
<style scoped>
ul li {
  list-style: none;
}
.container .title {
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li {
  padding: 20px;
  border-bottom: 1px solid #ccc;
}
.content_diy ul li h2 {
  color: #f00;
  font-size: 18px;
}
.dl_diy {
  width: 60%;
  margin: 0 auto;
}
.dl_diy dd {
  display: flex;
  justify-content: flex-start;
  border: 1px solid #d2cccc;
  border-radius: 3px;
  margin-top: -1px;
}
.dl_diy dd label {
  font-size: 16px;
  font-weight: bold;
  flex: 2;
  padding: 10px 0;
  text-align: center;
  border-right: 1px solid #d2cccc;
}
.dl_diy dd p {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.dl_diy dd p img {
  max-width: 100%;
}
.dl_diy dd .js {
  flex: 8;
  color: #000;
  font-size: 14px;
  padding: 10px;
  box-sizing: border-box;
}
.center {
  text-align: center;
}
.el-dialog__header {
  border-bottom: 1px solid #ccc;
}
</style>
<style>
.personInfo .el-dialog__header {
  border-bottom: 1px solid #ccc;
}
.personInfo .el-dialog__body {
  padding: 20px;
}
.personInfo .el-dialog__body p {
  padding: 10px 0;
}
</style>